<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@include file="/WEB-INF/layouts/taglib.jsp" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>index</title>
    <meta content="width=device-width, initial-scale=1" name="viewport"/>

    <link rel="stylesheet" href="${ctx}/static/css/bootstrap.css">
    <link rel="stylesheet" href="${ctx}/static/css/bootstrap-table.css">
    <link rel="stylesheet" href="${ctx}/static/css/font-awesome.css">
    <link rel="stylesheet" href="${ctx}/static/plugins/formValidation/formValidation.css">


    <script src="${ctx}/static/js/jquery.js"></script>
    <script src="${ctx}/static/js/bootstrap.js"></script>
    <script src="${ctx}/static/js/bootstrap-table.min.js"></script>
    <script src="${ctx}/static/js/bootstrap-table-zh-CN.js"></script>
    <script src="${ctx}/static/plugins/laydate/laydate.js"></script>
    <script src="${ctx}/static/commonjs/crud.js"></script>
    <script src="${ctx}/static/commonjs/mylaydate.js"></script>
    <script src="${ctx}/static/plugins/formValidation/formValidation.js"></script>
    <script src="${ctx}/static/plugins/formValidation/zh_CN.js"></script>
    <script src="${ctx}/static/plugins/formValidation/bootstrap.js"></script>
    <script src="${ctx}/static/plugins/layer/layer.js"></script>

    <script>

        $(function () {

            initTable()
            $("#queryBtn").bind("click", initTable);

            initLayDate();

            // 清除模态框数据，让其重新加载
            $("#myModal").on("hidden.bs.modal", function () {
                $(this).removeData("bs.modal");
            })
        });


        function initLayDate() {

            var start = {
                elem: "#search_startDate",
                //elem: startSelector,
                format: "YYYY/MM/DD",
                festival: true, //显示节日
                choose: function (datas) {
                    end.min = datas; //开始日选好后，重置结束日的最小日期
                    end.start = datas //将结束日的初始值设定为开始日
                }
            }

            var end = {
                elem: "#search_endDate",
                //elem :endSelector,
                format: 'YYYY/MM/DD',
                //min: laydate.now(),
                istime: true,
                istoday: false,
                choose: function (datas) {
                    start.max = datas; //结束日选好后，重置开始日的最大日期
                }
            }

            laydate(start);
            laydate(end);
        }

        /**
         *  初始化表格
         */
        function initTable() {
            //先销毁表格
            $('#myTable').bootstrapTable('destroy');

            $("#myTable").bootstrapTable({
                url: "${ctx}/signup/selectSignup",
                method: 'get',  // 必须用get，不然后台获取不到参数
                dataType: 'json',
                toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                strictSearch: true,
                showColumns: true,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                //   pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                //strictSearch: true,
                sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
                //minimumCountColumns: 10,             //当列数小于此值时，将隐藏内容列下拉框。
                clickToSelect: true,                //是否启用点击选中行
                // height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                // uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                queryParams: queryParams,

                exportDataType: 'all',

                columns: [
                    {
                        checkbox: true,
                        align: 'center',
                        valign: 'middle'
                    }, {
                        field: 'activityName',
                        title: '活动名称',
                        align: 'center',
                        valign: 'middle'

                    },{
                        field: 'studentName',
                        title: '学生名字',
                        align: 'center',
                        valign: 'middle'
                    },
                    {
                        field: 'status',
                        title: '报名状态',
                        align: 'center',
                        valign: 'middle',
                        sortable: true,
                        formatter: function(value, row, index){
                            if(row.status == "1")
                                return "已报名";
                            else
                                return "未报名";
                        }
                    }, {
                        field: 'signupDate',
                        title: '报名时间',
                        align: 'center',
                        valign: 'middle',
                        sortable: true,
                        formatter: function(value, row, index){
                            return dateFormatter(value);
                        }
                    }, {
                        field: 'payStatus',
                        title: '支付状态',
                        align: 'center',
                        valign: 'middle',
                        sortable: true,
                        formatter: function (value, row, index) {
                            if(row.payStatus == "1")
                                return "已支付";
                            else
                                return "未支付";
                        }
                    },{
                        field: 'note',
                        title: '备注',
                        align: 'center',
                        valign: 'middle',
                    }, {
                        title: '操作',
                        align: 'center',
                        valign: 'middle',
                        formatter: function (value, row, index) {
                            return [
                                ' <a href="${ctx}/signup/gotoSignupSavePage?id=' + row.id + '" data-toggle="modal" data-target="#myModal" class="btn btn-icon-only purple"><i class="fa fa-edit"></i></a>' +
                                '<a href="javascript:void();" onclick="doDelete(' + row.id + ", '${ctx}/sign/deleteSignupByPK'" + ')" class="btn btn-icon-only red"> <i class="fa fa-times"></i></a>',
                            ].join('');
                        }
                    }
                ],
            });
        }

        /**
         *  查询参数
         */
        function queryParams(params) {
            var activity = {    // 变量名必须和controller处的变量名一致
                //  pageSize: params.limit,   //页面大小
                // pageNumber: params.pageNumber,  //页码
                startDate: $("#search_startDate").val(),
                endDate: $("#search_endDate").val(),
                //sort: params.sort,  //排序列名
                //sortOrder: params.order//排位命令（desc，asc）
            }

            return activity;
        }

        /**
         * 刷新表格
         */
        function doQuery() {
            $('#myTable').bootstrapTable('refresh');
        }


    </script>

</head>
<body style="margin:100px">

<!-- 模态声明 -->
<div class="modal fade" id="myModal" tabindex="-1" data-keyboard="true">
    <!-- 窗口声明 -->
    <div class="modal-dialog">
        <!-- 内容声明  发送请求，加载task_save.jsp的数据到modal-content中-->
        <div class="modal-content">
        </div>
    </div>
</div>



<div class="container">
    <div class="row base-margin" id="query">
        <form class="form-inline" role="form" style="float: left; width: 100%" method="post" id="queryForm">
            <div class="form-group">
                <label for="search_startDate" class="control-label">开始日期:</label>
                <input placeholder="开始日期" type="text" value="" class="form-control" id="search_startDate"
                       name="search_startDate">
            </div>
            <div class="form-group">
                <label for="search_endDate" class="control-label">结束日期：</label>
                <input placeholder="结束日期" type="text" value="" class="form-control " id="search_endDate"
                       name="search_endDate">
            </div>

            <div class="form-group">
                <button type="button" id="queryBtn" onclick="doQuery();" class="btn btn-primary">查询</button>
            </div>
        </form>
    </div>
</div>
<br>
<br>
<br>

<div id="toolbar" class="btn-group">
    <a id="btn_add" href="${ctx}/signup/gotoSignupSavePage" type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
    </a>
    <button id="btn_delete" type="button" class="btn btn-default" onclick="doDeletes('${ctx}/signup/deleteSignupsByPK')">
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
    </button>
</div>
<table id="myTable"></table>


</body>
</html>